import React, { Component } from 'react';
import { connect } from 'dva';
import { SearchBar, Modal, Menu, Toast, Grid } from 'antd-mobile';
import router from 'umi/router';
import styles from './index.less';
import { fetchApi } from '@/utils/utils';

class ClassPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
    };
  }
  async getClassList() {
    let res = await fetchApi('web/class');
    if (res.status === 0) {
      const { list } = res.data;
      this.setState({
        data: list,
      });
    }
    console.log(res);
  }
  goVideoDetail = item => {
    router.push({
      pathname: '/videoList',
      query: {
        id: item.id,
        type: item.title,
      },
    });
  };
  componentDidMount() {
    this.getClassList();
  }
  render() {
    const { data } = this.state;
    return (
      <div className="search_cart">
        <Grid
          data={data}
          columnNum={3}
          hasLine={false}
          itemStyle={{ backgroundColor: '#eee' }}
          renderItem={dataItem => (
            <div className="class-item" onClick={() => this.goVideoDetail(dataItem)}>
              <img src={dataItem.icon} style={{ width: '75px', height: '75px' }} alt="" />
              <div style={{ color: '#888', fontSize: '14px', marginTop: '5px' }}>
                <span>{dataItem.title}</span>
              </div>
            </div>
          )}
        />
      </div>
    );
  }
}

export default ClassPage;
